﻿
@{
    ViewBag.Title = "ArticleSelect";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<style type="text/css">
    .divImageMaterialContainer {
        width: 230px;
        float: left;
        margin-right: 20px;
        margin-top: 20px;
        background-color: #FFF;
        font-size: 13px;
    }

    .tableImageMaterialContainer {
        width: 100%;
        border-collapse: collapse;
        border: solid #E7E7EB;
        border-width: 1px 0 0 1px;
    }

        .tableImageMaterialContainer td {
            border: 1px solid #E7E7EB;
        }

    .tableNoBorder {
        border: 0px;
    }

        .tableNoBorder td {
            border: 0px;
        }

    .divFirstArticleTitle {
        position: absolute;
        line-height: 24px;
        padding-left: 7px;
        vertical-align: middle;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 24px;
        background-color: #000000;
        color: white;
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
    }
</style>

<script>

    //当前页
    var _currentPage = 1;

    $(document).ready(function ()
    {
        loadData();
    });

    function loadData(targetPage)
    {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.ExceptUnpublished = true;

        $.ajax({
            url: "/Api/Material/GetArticleMaterialList",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR)
            {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success)
                {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;

                    //  alert(JSON.stringify(resultObj.ArticleMaterialList));
                    var gettpl = document.getElementById('articleListTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html)
                    {
                        document.getElementById('divArticleList').innerHTML = html;
                        //fitTable();
                    });

                    laypage({
                        skin: 'yahei',
                        cont: document.getElementById('divPagingContainer'),
                        pages: resultObj.TotalPage, //总页数
                        curr: resultObj.Page, //当前页
                        groups: 7, //连续显示分页数
                        jump: function (obj, first)
                        {
                            if (!first)
                            { //点击跳页触发函数自身，并传递当前页：obj.curr
                                loadData(obj.curr);
                            }
                        }
                    });

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function selectArticle(id)
    {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

        parent.__selectMaterialArticleResult(id, index);
    }

    function cancel()
    {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }

</script>

<script id="articleListTemplate" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}

    <div class="divImageMaterialContainer">
        <div>
            {{ d[i].name }}
        </div>
        {{# if(d[i].weixinStatus != 2){ }}
        <div style="color:red">
            发布失败
        </div>
        {{# } }}

        <div style="margin-top:10px;">
            <table class="tableImageMaterialContainer">

                <tr>
                    <td valign="top">
                        <div>
                            <div style="position:relative; height:100px;">
                                <div style="position:absolute; left:0px; right:0px; height:100px; overflow:hidden">
                                    <img src="{{ d[i].articles[0].thumbUrl }}" style=" width:100%;">
                                </div>
                                <div class="divFirstArticleTitle">
                                    <a style="color:white" target="_blank" href="{{ d[i].articles[0].url }}">{{ d[i].articles[0].title }}</a>
                                </div>
                            </div>
                            {{# for(var j = 1, len2 = d[i].articles.length; j < len2; j++){ }}
                            <div class="divDotLine" style="margin-top:10px;">
                            </div>
                            <div style="margin-top:10px; margin-left:5px; margin-right:5px;">
                                <table class="tableNoBorder" width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td><a style="color:black" target="_blank" href="{{ d[i].articles[j].url }}">{{ d[i].articles[j].title }}</a></td>
                                        <td width="75" align="right"><img src="{{ d[i].articles[j].thumbUrl }}" width="70" height="70"></td>
                                    </tr>
                                </table>
                            </div>
                            {{# } }}
                        </div>
                    </td>
                </tr>

                <tr>
                    <td height="30" valign="middle" bgcolor="#F4F5F9">
                        <div style="margin-left:10px;">
                            <a href="javascript:void(0)" onclick="selectArticle('{{ d[i].id }}')">选择</a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    {{# } }}

    <div style="clear: both"></div>

</script>



<div style="margin-left:20px; margin-right:20px; margin-top:20px;">
    <span id="spanTitle" class="font_black_24">选择图文素材</span>
</div>

<div style=" background-color:#ccc; margin-left:20px; margin-right:20px; margin-top:10px; height:1px;">

</div>

<div style=" position:absolute; overflow:auto ;margin-top:25px;left:30px; right:30px; bottom:58px; top:36px; ">

    <div id="divArticleList">


    </div>


    <div id="divPagingContainer" style="margin-top: 20px; text-align: right;">
        
    </div>

</div>


<div style=" background-color:#ccc; position:absolute; bottom:55px; left:20px;right:20px; height:1px;">

</div>

<div style="position:absolute; bottom:15px; left:20px;right:20px;">

    <div style="float:right">
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取消" onclick="cancel()" />
    </div>
    <div style="clear:both">
    </div>
</div>

